<template>
    <div>
        <el-row>
            <el-col :span="12">
                <el-tabs v-model="queryData.ThemeType" @tab-click="handleClick">
                    <el-tab-pane label="全部" name="null"></el-tab-pane>
                    <el-tab-pane label="话题" name="0"></el-tab-pane>
                    <el-tab-pane label="评论" name="1"></el-tab-pane>
                </el-tabs>
            </el-col>
            <el-col :span="8">
                &nbsp;
            </el-col>
            <el-col :span="4">
                <el-input
                    suffix-icon="el-icon-search"
                    v-model="queryData.TitleOrContent"
                    @blur="getData">
                </el-input>
            </el-col>
        </el-row>
        <div>
            <ul>
                <li v-for="(item,index) in dataList" :key="index" class="j_item">
                    <div class="j_item_title">
                        <span>发言人:{{item.createUserName}}</span>
                        <span style="font-weight: initial;font-size: 12px;color: #e6a23c;cursor: pointer;" @click="userZiLiao(item)">展开他/她的个人信息 ></span>
                    </div>
                    <div class="j_item_context" style="color:#333;text-indent: 2em;padding-right:80px;word-break: break-word;">{{item.content}}</div>
                    <div v-if="item.type == 1" class="j_item_context">评论话题: {{item.title}}</div>
                    <div class="j_BiaoQian">{{item.regionName}}{{item.streetName}}{{item.neighborhoodCommitteeName}}</div>
                    <div>

                    </div>
                </li>
            </ul>
        </div>
        <div style="text-align:right;margin:15px 0;">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryData.pageIndex"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="queryData.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>
    </div>
</template>
<script>
import {pcIndex} from "@/api/Theme.js"

export default {
  data() {
    return {
      dataList: [],
      queryData: {
        here: 1,
        TitleOrContent: "",
        ThemeType: "null",
        pageIndex: 1,
        pageSize: 10
      },
      total: 2
    };
  },
  created() {
    this.getData();
  },
  methods: {
    userZiLiao(val) {
      this.$router.push({
        path: "/queryContent/userInfo",
        query: {
          userId: val.createUserId,
          userName: val.createUserName
        }
      });
    },
    getData() {
        pcIndex(this.queryData).then(res=>{
          this.dataList = res.data.list
          this.total = res.data.total
        })
    },
    handleClick(tab, event) {
      console.log(tab, event);
      this.getData();
    },
    handleSizeChange(val) {
      this.queryData.pageSize = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.queryData.pageIndex = val;
      this.getData();
    }
  }
};
</script>

<style scoped>
.j_BiaoQian {
  display: inline-block;
  padding: 0px 15px;
  border: 1px solid #39b8ef;
  border-radius: 12px;
  color: #39b8ef;
  margin-top: 8px;
  font-size: 14px;
}
</style>
